<template>

  <div>
    <div >
      <el-breadcrumb separator="/">
        <!--     <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
        <!--     <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>-->
        <el-breadcrumb-item>审批管理</el-breadcrumb-item>
        <el-breadcrumb-item>请假审批</el-breadcrumb-item>
      </el-breadcrumb>
    </div>


    <div>

      <el-form :inline="true" :model="forObject"  style="margin-top: 15px" class="demo-form-inline">
        <el-form-item label="请假标题" style="float: left">
          <el-input v-model="forObject.name" placeholder="请假标题"></el-input>
        </el-form-item>

        <el-form-item label="请假事由" style="float: left">
          <el-input v-model="forObject.detail" placeholder="请假事由"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button type="primary"  @click="_onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="float: left;margin-top: 8px;margin-bottom: 8px">
      <el-button type="primary" @click="_submit">提交审批</el-button>
      <el-button type="primary" @click="_add()">申请</el-button>
    </div>
    <div style="margin-top: 20px">

      <el-table
        :data="getPage"
        border
        height="500"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column v-for="item in columnName" :key="item.id" :label="item.label" >
          <template slot-scope="scope">
            <span>{{scope.row[item.prop]}}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="_edit(scope.row)" type="text" size="small">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>


    </div>
    <ProcessImageView ref="processImageViewRef"  @on-result-change="_page"></ProcessImageView>
    <ProcessApprovalEdit ref="processApprovalEditRef"  @on-result-change="_page"></ProcessApprovalEdit>
  </div>

</template>

<script>
  import  ProcessImageView from './ProcessImageView'
  import  ProcessApprovalEdit from './ProcessApprovalEdit'
  export default {

    mounted(){
      this._page();
    },
    components:{
      ProcessImageView,
      ProcessApprovalEdit
    },
    name: "Home",
    data(){
      return {
        forObject:{
          name:undefined,
          detail:undefined
        },
        currentPage:1, //初始页
        pageSize:10,    //    每页的数据
        total:0,    //    每页的数据
        getPage:[],
        selectIds:[],
        selectData:[],
        columnName:[
          {prop:"processName",label:"流程名称",width:"120",fixed:true},
          {prop:"applyUserName",label:"申请人",width:"100"},
          {prop:"applyReason",label:"申请原因",width:"100"},
          {prop:"createTime",label:"申请时间",width:"70"}
        ],
      }
    },
    methods:{
      handleClick(data){
        this.$refs.processImageViewRef._open('/oa/flow/watch_process_image?processInstanceId='+data.processInstanceId+'&token='+localStorage.getItem("JWT_TOKEN"));
      },

      handleSizeChange(val) {
        this.pageSize=val;
        this._page();
      },
      handleCurrentChange(val) {
        this.currentPage=val;
        this._page();
      },

      _page(){
        this.forObject.pageSize = this.pageSize;
        this.forObject.pageNum = this.currentPage;
        this.$http.post('/oa/flow/page_task_list',this.forObject).then(res=>{
          let data= res.data.data;
          this.getPage=data.records;
          console.log('----------------data',data)
          console.log('-----------------',data.total)
          this.total=data.total;
        }).catch(err=>{
          console.log(err)
        });
      },

      _edit(row){
        // this.$router.push('/work-form/leave_handle?id='+row.businessId)
        this.$router.push({path:'/workflow/leave_handle', query: {businessId: row.businessId,id:row.id}})
      },

      _add(){
        this.$refs.processApprovalEditRef._open();
      },

      _submit(){
        if (this.selectData.length===0||this.selectIds.length===0){
          this.$message({
            type: 'warning',
            message: '请选择要提交的数据!'
          });
          return false;
        }
        for (let i=0;i<this.selectData.length;i++){
          if (this.selectData[i].status!=0){
            this.$message({
              type: 'warning',
              message: '请选择未提交的数据!'
            });
            return  false;
          }
        }

        this.$http.post('/leave/submit_process?ids='+this.selectIds).then(res=>{
          console.log('res----------------',res)
          this.$message({
            type: 'success',
            message: '提交成功!'
          });
          this.$emit('on-result-change')
          this.dialogFormVisible = false;

        }).catch(err=>{
          this.$message({
            type: 'info',
            message: '提交失败'
          });
        })


      },


      _onSearch(){
          console.log('------------------------',this.forObject)
          this._page();
      },
      handleSelectionChange(val) {
        this.selectIds = [];
        this.selectData = val;
        for (let i=0;i<val.length;i++){
          this.selectIds.push(val[i].id)
        }
      }

    },

  }
</script>

<style scoped>

</style>
